<!-- 首页九宫格 -->
<template>
  <div class="templateCotaiener">
    
    <van-popup v-model="showPopup" position="bottom" :overlay="true">
      <!-- position: fixed; -->
      <div style="width: 100%;height: 70%; top: 0;background: #fff;">
        <van-nav-bar title="选择需要下载的报表目录"  />
      </div>
      <van-tree-select
        :items="items"
        :active-id.sync="items.text"
        :main-active-index.sync="items.text"
        @click-nav="onNavClick"
      >
        <template slot="content">
          <ul class="right-content">
            <!-- :class="{ active: policeCode == item.policeCode }" 
            @click="onItemClick(item.policeName, item.policeCode)"-->
            <li
              v-for="(item, index) in excelDownLoadList"
              :key="index"
            >
              {{ item.title }}
            </li>
          </ul>
        </template>
      </van-tree-select>
    </van-popup>
  </div>
</template>

<script>
import { Icon, Grid, GridItem, Popup, TreeSelect } from "vant";

export default {
  components: {
    "van-icon": Icon,
    "van-grid": Grid,
    "van-grid-item": GridItem,
    "van-popup": Popup,
    "van-tree-select": TreeSelect
  },
  data() {
    return {
      // 是否弹窗
      showPopup: false,
      // 左侧选中项的索引
      activeIndex: 0,
      excelDownLoadList: [
      ],
      // 分类显示所需的数据
      items: [
        {
          text: "报表文件目录",
          activeId:1,
        },
      ]
    };
  },
  methods: {
    // 返回到上一页
    onClickLeft() {
      this.$router.back();
    },
    // 下载报表点击事件
    excelDownloadChange() {

    },
    onNavClick(index) {
       console.log(index)    
        let substationCode = this.items[index].activeId //这是我们通过index获取到当前点击的值
        this.requestPoliceList(substationCode) //这是请求右侧列表的请求通过activeId去请求。
    },
    
  }
};
</script>

<style lang="less" scoped>
.templateCotaiener{
  .right-content{
    border: 1px solid red;
  }

}
</style>
